import Image from "next/image";
import { Inter } from "next/font/google";
import hero2 from "../images/hero-2.png";
import { BoxReveal } from "@/components/magicui/box-reveal";
import { Button } from "@/components/ui/button";
import { GridPattern } from "@/components/magicui/grid-pattern";
const inter = Inter({ subsets: ["latin"] });


export default function Home() {
  return (
    <div className="min-h-screen bg-white dark:bg-gray-950 transition-colors duration-300 relative overflow-hidden">
      <GridPattern
        squares={[
          [4, 4],
          [5, 1],
          [8, 2],
          [5, 3],
          [5, 5],
          [10, 10],
          [12, 15],
          [15, 10],
          [10, 15],
          [15, 10],
          [10, 15],
          [15, 10],
        ]}
        className="fixed inset-0 w-full h-full [mask-image:radial-gradient(800px_circle_at_center,white,transparent)] opacity-30 pointer-events-none"
      />
      <main className="relative isolate">
        {/* Hero section */}
        <div className="relative flex flex-col items-center justify-center min-h-[90vh] pt-24 pb-32 px-4">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="mx-auto max-w-4xl text-center space-y-12">
              <BoxReveal boxColor={"#472F95"} duration={0.5}>
                <h1 className="text-6xl font-bold tracking-tight leading-tight bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 dark:from-indigo-300 dark:via-purple-300 dark:to-pink-300 bg-clip-text text-transparent animate-gradient-x transition-colors duration-300 sm:text-8xl">
                  olllo<span className="text-[#5046e6]">.</span>全新组件库
                </h1>

              </BoxReveal>

              <BoxReveal boxColor={"#472F95"} duration={0.5} width="100%">
                <p className="mt-8 text-2xl leading-8 text-gray-900 dark:text-gray-100 font-medium group transition-all duration-300 hover:translate-x-2">
                  现代化的
                  <span className="text-[#46e6c9] dark:text-[#6ee8d4] group-hover:text-[#38d8b9] dark:group-hover:text-[#8eeede] transition-colors duration-300">
                    开源微信小程序ui</span>组件库解决方案
                </p>
              </BoxReveal>

              <BoxReveal boxColor={"#472F95"} duration={0.6} width="100%">
                <p className="mt-4 text-2xl leading-7 text-gray-900 dark:text-gray-100 font-medium group transition-all duration-300 hover:translate-x-2">
                  简单易用的
                  <span className="bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-300 dark:to-purple-300 bg-clip-text text-transparent group-hover:bg-gradient-to-r group-hover:from-indigo-400 group-hover:to-purple-400 dark:group-hover:from-indigo-200 dark:group-hover:to-purple-200 transition-all duration-300">可视化编辑器</span>，
                  让您的创意自由绽放
                </p>
              </BoxReveal>

              <BoxReveal boxColor={"#472F95"} duration={0.7} width="100%">
                <p className="mt-4 text-2xl leading-8 text-gray-900 dark:text-gray-100 font-medium group transition-all duration-300 hover:translate-x-2">
                  强大的
                  <span className="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-300 dark:to-pink-300 bg-clip-text text-transparent group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-pink-400 dark:group-hover:from-purple-200 dark:group-hover:to-pink-200 transition-all duration-300">插件系统</span>，
                  轻松扩展网站功能
                </p>
              </BoxReveal>
              <div className="mt-16 flex items-center justify-center gap-8">
                <Button
                  size="lg"
                  className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:opacity-90 text-white text-lg px-8 py-6 h-auto transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
                  onClick={() => window.open('https://github.com/yourusername/jank', '_blank')}
                >
                  开始使用
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="bg-white/5 dark:bg-gray-900/5 backdrop-blur-sm border-2 border-indigo-500 dark:border-indigo-300 text-indigo-500 dark:text-indigo-300 text-lg px-8 py-6 h-auto hover:bg-indigo-500 hover:text-white dark:hover:bg-indigo-300 dark:hover:text-gray-900 transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
                  onClick={() => window.open('https://github.com/yourusername/jank/docs', '_blank')}
                >
                  查看文档
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Feature section */}
        <div className="mx-auto max-w-7xl px-6 sm:mt-48 lg:px-8">
          <div className="mx-auto max-w-2xl text-center space-y-8">
            <h2 className="text-lg font-semibold leading-8 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 dark:from-indigo-300 dark:via-purple-300 dark:to-pink-300 bg-clip-text text-transparent transition-colors duration-300">
              更快 更强 更简单
            </h2>
            <p className="mt-4 text-4xl font-bold tracking-tight bg-gradient-to-r from-indigo-400 to-purple-500 dark:from-indigo-200 dark:to-purple-300 bg-clip-text text-transparent transition-colors duration-300 sm:text-5xl">
              专注于创作体验
            </p>
            <p className="mt-8 text-xl leading-8 text-gray-600 dark:text-gray-400 transition-colors duration-300">
              Jank 提供了一个现代化的内容创作和管理平台，让您能够专注于内容创作
            </p>
            <div className="mt-12 space-y-6 text-gray-600 dark:text-gray-400">
              <p className="text-xl leading-8 hover:transform hover:translate-x-2 transition-transform duration-300">
                <span className="font-semibold bg-gradient-to-r from-purple-500 to-indigo-500 dark:from-purple-300 dark:to-indigo-300 bg-clip-text text-transparent">智能编辑器</span> -
                支持所见即所得的编辑体验，让内容创作更加直观
              </p>
              <p className="text-xl leading-8 hover:transform hover:translate-x-2 transition-transform duration-300">
                <span className="font-semibold bg-gradient-to-r from-indigo-500 to-pink-500 dark:from-indigo-300 dark:to-pink-300 bg-clip-text text-transparent">插件生态</span> -
                丰富的插件市场，一键安装所需功能
              </p>
              <p className="text-xl leading-8 hover:transform hover:translate-x-2 transition-transform duration-300">
                <span className="font-semibold bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-300 dark:to-purple-300 bg-clip-text text-transparent">性能优化</span> -
                采用最新技术栈，确保网站高效运行
              </p>
            </div>
          </div>
          <div className="mx-auto mt-24 max-w-5xl sm:mt-32 lg:mt-40 animate-fade-in-up">
            <Image
              src={hero2}
              alt="App screenshot"
              width={2432}
              height={1442}
              className="rounded-2xl shadow-2xl ring-1 ring-gray-900/10 dark:ring-white/10 animate-slide-in transition-shadow duration-300 hover:shadow-3xl"
            />
          </div>
        </div>

        {/* Footer */}
        <footer className="mx-auto mt-40 max-w-7xl px-6 pb-16 sm:mt-48 lg:px-8">
          <div className="border-t border-gray-900/10 dark:border-gray-100/10 pt-10 transition-colors duration-300">
            <p className="text-sm leading-6 text-gray-500 dark:text-gray-400 transition-colors duration-300">
              © 2025 Jank. All rights reserved.
            </p>
          </div>
        </footer>
      </main>
    </div>
  );
}
